import styles from './TableColumn.module.scss'
import { fllowTiktok } from '@/api/customerCenter/groupManage'
import { reactive } from 'vue'

const tikTok = reactive<Array<any>>([])
const showData = (val: any) => {
  let params = {
    cust_id: val,
    page: 1,
    page_size: 9999
  }
  fllowTiktok(params).then((res: any) => {
    tikTok.splice(0, tikTok.length, ...(res.data || []))
  })
}
export const renderCustInfo = ({ row, column, index }: any) => {
  if (row.type == 1) {
    if (row.cust_baseinfo) {
      return (
        <div class="avatar-box">
          <el-image class="avatar" teleported="true" src={row.cust_baseinfo.avatar} fit="cover" />
          <el-tooltip effect="dark" content={`${row.cust_baseinfo.name} ${row.cust_baseinfo.nickname ? '(' + row.cust_baseinfo.nickname + ')' : ''}`} placement="top-start">
            <div class="name">
              {row.cust_baseinfo.name} {row.cust_baseinfo.nickname ? '(' + row.cust_baseinfo.nickname + ')' : ''}
            </div>
          </el-tooltip>
          {row.cust_baseinfo.sex == 0 ? <img class="sex" src="/static/customer/sex_0.png" /> : row.cust_baseinfo.sex == 1 ? <img class="sex" src="/static/customer/sex_1.png" alt="" /> : <img class="sex" src="/static/customer/sex_2.png" alt="" />}
          {row.is_protected == 1 ? <img style="width:18px;height:18px;margin-left:6px" src="/static/protect.png"/>:''}
        </div>
      )
    }
  }

  if (row.type == 2) {
    return (
      <div class="crop">
        <img class="crop_awatar" src={row.avatar} alt="" />
        <div class="crop_info">
          <el-tooltip effect="dark" content={row.crop_name} placement="top">
            <div class="crop_name">{row.crop_name || '--'}</div>
          </el-tooltip>
          <div class="crop_contact">
            共{row.contact?.length || 0}个联系人
            {row.contact?.length && (
              <>
                <el-popover placement="right" width={300} trigger="click" popper-class="popper">
                  {{
                    reference: () => <span class="crop_contact_look">查看</span>,
                    default: () => (
                      <>
                        <el-table id="contact_table" data={row.contact} height={75 * row.contact.length} show-header={false}>
                          <el-table-column property="date">
                            {{
                              default: (scope: any) => (
                                <>
                                  <div class={styles.contact_user}>
                                    <el-avatar shape="square" size={50} src={scope.row.avatar} onError={() => true}>
                                      {' '}
                                    </el-avatar>
                                    <div class={styles.contact_info}>
                                      <div class={styles.contact_user_name}>
                                        <el-tooltip effect="dark" content={scope.row.name} placement="top-start">
                                          <div class={styles.contact_name}>{scope.row.name}</div>
                                        </el-tooltip>
                                        <div class={styles.winxin_box}>
                                          {scope.row.add_status == 0 ? (
                                            <img class={styles.weixin} src="/static/customer/wechat_0.png" alt="" />
                                          ) : scope.row.add_status == 1 ? (
                                            <img class={styles.weixin} src="/static/customer/wechat_1.png" alt="" />
                                          ) : (
                                            <>
                                              <img class={styles.weixin} src="/static/customer/wechat_2.png" alt="" /> <span> 已申请</span>
                                            </>
                                          )}
                                        </div>
                                      </div>
                                    </div>
                                    <div class={styles.contact_time}>上次跟进时间：{scope.row.last_follow_time || '--'}</div>
                                  </div>
                                </>
                              )
                            }}
                          </el-table-column>
                        </el-table>
                      </>
                    )
                  }}
                </el-popover>
              </>
            )}
            {row.is_protected == 1 ? <img style="width:18px;height:18px;margin-left:6px" src="/static/protect.png"/>:''}
          </div>
        </div>
      </div>
    )
  }
  if (row.is_follow) {
    return <>
      <el-popover ref="popoverRef" placement="right" width={320} trigger="hover" onShow={showData(row.id)}>
        {{
          reference: () => <>
          <div class={styles.attention}>
            <img style="width: 15px; height: 15px; padding-top: 3px" src="/static/customer/douyin-icon.png" />
            <span>已关注</span></div
            ></>,
          default: () => <>
            <el-scrollbar max-height={400}>
              <div class={styles.popoverContent}>
                {tikTok.map((item) => (
                  <div class={styles.popoverItem} key={item.id}>
                  <div>
                      <img class={styles.img} src={item.douyin_following.avatar} alt="" />
                  </div>
                  <div class={styles.msg}>
                    <h3>{ item.douyin_following.nickname }</h3>
                    <h5>{ item.douyin_following.is_delete ? '关注时间：' : '取关时间：' }{ item.douyin_following.created_at || '--' }</h5>
                  </div>
                </div>
                ))}
            </div>
          </el-scrollbar>
          </>
        }}
      </el-popover>
    </>
  }
 
}
